<!--
 * @Description: 时间轴
 * @Author: zhaolei
 * @Date: 2023-08-02 16:51:37
-->

<template>
  <el-dialog
    title="时间轴"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <div v-if="!validatenull(list)">
      <!-- <div class="mb-20">{收养日期} 来到{基地名称}</div> -->
      <div
        v-for="(v, k) in list"
        :key="k"
        class="mb-20 flex align-items"
      >
        <div :class="{'el-icon-success': v.status === '1', 'el-icon-error': v.status === '0'}"></div>
        <div v-if="v.matterValue === 'adopt'">
          <div class="action-text">
            <span
              v-if="!!v.completeTime"
              class="mr-20"
            >{{ v.completeTime&&v.completeTime.substr(0, 10) }}</span>
            {{ v.matterName }}
          </div>
        </div>
        <div
          v-else
          class="flex align-items"
        >
          <div
            v-if="v.status === NOT_FINISH"
            class="flex y-center align-items"
          >
            <div class="action-text">
              <span
                v-if="!!v.completeTime"
                class="mr-20 flex-shrink"
              >{{ v.completeTime }}</span>
              {{ v.matterName }}
            </div>
            <el-button
              type="primary"
              size="small"
              @click="finish(v)"
            >标记完成</el-button>
          </div>
          <div
            v-else
            class="flex align-items"
          >
            <span class="mr-20 flex-shrink">{{ v.completeTime&&v.completeTime.substr(0, 10) }}</span>
            <div class="flex align-items">
              <div class="flex align-items">
                <div class="description">
                  完成<span class="action">{{ v.matterName }}</span>
                </div>
                <el-button
                  type="primary"
                  size="small"
                  class="edit-button"
                  @click="finish(v)"
                >编辑 </el-button>
              </div>
              <div class="remark">
                备注：{{ v.remark }}
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <el-empty v-else></el-empty>
    <timeLineFinish
      :id="matterId"
      v-model="timeLineFinishVisible"
      :matter-name="matterName"
      :is-edit="isEdit"
      @success="getList"
    ></timeLineFinish>
  </el-dialog>
</template>

<script>
import timeLineFinish from './timeLineFinish.vue';
import { getPetMatter } from '@/api/core/pet-file';
const NOT_FINISH = '0';
export default {
  name: 'timeLine',
  components: { timeLineFinish },
  props: {
    id: {
      type: [Object, String],
    },
    value: {
      type: Boolean,
      default: false,
    },
    dataObj: { type: [Object] },
  },
  data() {
    return {
      form: {},
      loading: false,
      // tableOption: tableOption(),
      fileList: [],
      isCropper: false,
      list: [],
      timeLineFinishVisible: false,
      matterId: null,
      matterName: '',
      NOT_FINISH,
      isEdit: false,
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
  },
  watch: {
    visible(val) {
      val && this.getList();
    },
  },
  methods: {
    finish(v) {
      this.matterId = v.id;
      this.matterName = v.matterName;
      this.timeLineFinishVisible = true;
      this.isEdit = v.status !== NOT_FINISH;
    },
    async getList() {
      const res = await getPetMatter(this.id);
      this.list = res.data.data;
      console.log('list', this.list);
    },
  },
};
</script>

<style lang='scss' scoped>
.edit-button {
  background: #b8b6b6;
  border-color: #b8b6b6;
  width: 85px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mr-50 {
  margin-right: 50px;
}
.action {
  color: $--color-primary;
  margin-left: 10px;
  margin-right: 60px;
}
.mr-20 {
  margin-right: 20px;
}
.remark {
  margin-top: 10px;
  margin-left: 10px;
}
.description {
  width: 240px;
}
.time {
  width: 80px;
}
.action-text {
  width: 340px;
}
.el-icon-success,
.el-icon-error {
  font-size: 20px;
  margin-right: 10px;
  color: #cecbcb;
}
.el-icon-success {
  color: green;
}
</style>
